<template>
  <div class="components-com">
    <!-- 标题 -->
    <CustomerAnalysisTitle
      :title="title"
      :tips="tips"
    />
    <!-- /标题 -->

    <!-- 表格 -->
    <div class="com-table">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        style="width: 100%"
      >
        <el-table-column
          prop="type"
          :label="$t('dataAnalysis.customerType')"
          width="180"
        />
        <el-table-column
          prop="customerNum"
          :label="$t('dataAnalysis.customers')"
        />
        <el-table-column
          prop="customerRate"
          :label="$t('dataAnalysis.customerNumberProportion')"
        />
        <el-table-column
          prop="customerSinglePrice"
          :label="$t('home.customerPrice')"
        />
        <el-table-column
          prop="payAmount"
          :label="$t('dataAnalysis.payAmount')"
        />
      </el-table>
    </div>
    <!-- /表格 -->

    <!-- 单选按钮 -->
    <div class="six-radio">
      <span>{{ $t('dataAnalysis.trendIndicatorSelection') }}：</span>
      <el-radio-group v-model="radio">
        <el-radio :label="0">
          {{ $t('dataAnalysis.customers') }}
        </el-radio>
        <el-radio :label="1">
          {{ $t('home.customerPrice') }}
        </el-radio>
        <el-radio :label="2">
          {{ $t('dataAnalysis.payAmount') }}
        </el-radio>
      </el-radio-group>
    </div>
    <!-- /单选按钮 -->

    <!-- 数据图 -->
    <div class="deal-cust-chart">
      <common-chart
        v-if="dealCustChart.show"
        :options="dealCustChart.options"
        style="width: 100%; height: 300px"
      />
    </div>
    <!-- /数据图 -->
  </div>
</template>

<script setup>
import CustomerAnalysisTitle from './cust-analysis-title.vue'

const props = defineProps({
  timeData: {
    type: Object,
    default: null
  }
})

let dateValue = 1
let dateRange = []
watch(() => props.timeData, () => {
  dateValue = props.timeData.dateValue
  dateRange = props.timeData.dateRange
  getPayCust()
}, { deep: true })
const radio = ref(0)

watch(radio, (val) => {
  switchChart(val)
})
onMounted(() => {
  initData()
})

/**
 * 初始化数据
 */
const title = ref('')
const tips = ref('')
const tableData = ref([])

const initData = () => {
  title.value = $t('dataAnalysis.transactionCustomerAnalysis')
  tips.value = $t('dataAnalysis.transactionTips')
  tableData.value = [{
    type: $t('dataAnalysis.allTradedMember'),
    customerNum: '0',
    customerRate: '0.00%',
    customerSinglePrice: '0',
    payAmount: '0',
    transRate: '0.00%'
  }, {
    type: $t('dataAnalysis.newTM'),
    customerNum: '0',
    customerRate: '0.00%',
    customerSinglePrice: '0',
    payAmount: '0',
    transRate: '0.00%'
  }, {
    type: $t('dataAnalysis.oldTM'),
    customerNum: '0',
    customerRate: '0.00%',
    customerSinglePrice: '0',
    payAmount: '0',
    transRate: '0.00%'
  }]
}
/**
 * 初始化一个obj
 */
const initObj = (name) => {
  const obj = {}
  obj.name = name
  obj.type = 'line'
  obj.stack = $t('home.totals')
  obj.smooth = true
  obj.data = []
  return obj
}
/**
 * 获取成交客户数据
 */
let dateArr = []
// 接口返回的数据
let newCustNum = []
let oldCustNum = []
let newCustSingPrice = []
let oldCustSingPrice = []
let newPayAmount = []
let oldPayAmount = []
// 第四个图
let seriesDataArr = []
const getPayCust = () => {
  http({
    url: http.adornUrl('/admin/customerAnalysis/getCustomerDeal'),
    method: 'get',
    params: http.adornParams(
      {
        dateType: dateValue,
        startTime: dateRange[0],
        endTime: dateRange[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      // 表格赋值 全部数据
      tableData.value[0].customerNum = data.allDeal.customerNum
      tableData.value[0].customerRate = (data.allDeal.customerRate * 100).toFixed(2) + '%'
      tableData.value[0].customerSinglePrice = data.allDeal.customerSinglePrice
      tableData.value[0].payAmount = data.allDeal.payAmount
      tableData.value[0].transRate = (data.allDeal.transRate * 100).toFixed(2) + '%'
      // 新成交客户
      tableData.value[1].customerNum = data.newDeal.customerNum
      tableData.value[1].customerRate = (data.newDeal.customerRate * 100).toFixed(2) + '%'
      tableData.value[1].customerSinglePrice = data.newDeal.customerSinglePrice
      tableData.value[1].payAmount = data.newDeal.payAmount
      tableData.value[1].transRate = (data.newDeal.transRate * 100).toFixed(2) + '%'
      // 老成交客户
      tableData.value[2].customerNum = data.oldDeal.customerNum
      tableData.value[2].customerRate = (data.oldDeal.customerRate * 100).toFixed(2) + '%'
      tableData.value[2].customerSinglePrice = data.oldDeal.customerSinglePrice
      tableData.value[2].payAmount = data.oldDeal.payAmount
      tableData.value[2].transRate = (data.oldDeal.transRate * 100).toFixed(2) + '%'
      // 图表的赋值
      dateArr = []
      seriesDataArr = []
      newCustNum = []
      oldCustNum = []
      newCustSingPrice = []
      oldCustSingPrice = []
      newPayAmount = []
      oldPayAmount = []
      const obj1 = initObj($t('dataAnalysis.newCustomerVisitPaymentConversionRate'))
      const obj2 = initObj($t('dataAnalysis.newCustomerVisitPaymentConversionRate'))
      data.listDeal.forEach(i => {
        dateArr.push(i.currentDay)
        newCustNum.push(i.newCustomerNum)
        oldCustNum.push(i.oldCustomerNum)
        newCustSingPrice.push(i.newCustomerSinglePrice)
        oldCustSingPrice.push(i.oldCustomerSinglePrice)
        newPayAmount.push(i.newPayAmount)
        oldPayAmount.push(i.oldPayAmount)
        // 第四个图的数据
        obj1.data.push(i.newTransRate)
        obj2.data.push(i.oldTransRate)
      })
      seriesDataArr.push(obj1)
      seriesDataArr.push(obj2)
      switchChart(radio)
    }
  })
}
// 获取数据图
let newCustTitle = []
// 图表的标题和展示的数据
let oldCustTitle = []
let newCustArr = []
let oldCustArr = []
const dealCustChart = reactive({
  options: {},
  show: false
})
const getChart = () => {
  dealCustChart.options = {
    color: ['#155bd4', '#3DD86B'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      top: '50px',
      left: '50px',
      right: '15px',
      bottom: '50px'
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: dateArr,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ''
      }
    ],
    series: [
      {
        name: newCustTitle,
        type: 'bar',
        data: newCustArr,
        barWidth: 48
      },
      {
        name: oldCustTitle,
        type: 'bar',
        data: oldCustArr,
        barWidth: 48
      }
    ]
  }
  dealCustChart.show = true
}
/**
 * 生成第四个图表
 */
const getTrendChart = () => {
  dealCustChart.options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: [],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateArr,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: seriesDataArr
  }
  dealCustChart.show = true
}
// 图切换选项
const switchChart = (val) => {
  switch (val) {
    case 0:
      newCustTitle = [$t('dataAnalysis.numberOfNewCustomersTraded')]
      oldCustTitle = [$t('dataAnalysis.numberOfOldCustomersTraded')]
      newCustArr = newCustNum
      oldCustArr = oldCustNum
      break
    case 1:
      newCustTitle = [$t('dataAnalysis.numberOfNewCustomersTradedUnitPrice')]
      oldCustTitle = [$t('dataAnalysis.numberOfOldCustomersTradedUnitPrice')]
      newCustArr = newCustSingPrice
      oldCustArr = oldCustSingPrice
      break
    case 2:
      newCustTitle = [$t('dataAnalysis.numberOfNewCustomersTradedPayAmount')]
      oldCustTitle = [$t('dataAnalysis.numberOfOldCustomersTradedPayAmount')]
      newCustArr = newPayAmount
      oldCustArr = oldPayAmount
      break
    case 3:
      getTrendChart()
      return
    default:
      newCustTitle = [$t('dataAnalysis.numberOfNewCustomersTraded')]
      oldCustTitle = [$t('dataAnalysis.numberOfOldCustomersTraded')]
      newCustArr = newCustNum
      oldCustArr = oldCustNum
  }
  getChart()
}

</script>

<style lang="scss" scoped>
.components-com {
  .com-table {
    margin-top: 20px;
  }
  .six-radio {
    display: flex;
    align-items: center;
    height: 65px;
    background: #F7F8FA;
    padding-left: 20px;
    margin-top: 20px;
  }
  .deal-cust-chart {
    margin-top: 20px;
  }
}
</style>
